@use "@/common/styles/colors"

.server-search
  position: relative
  flex: 1
  min-width: 0
  container-type: inline-size

.search-icon
  container-type: inline-size

.search-icon
  position: absolute
  top: 50%
  left: 0.75rem
  width: 2rem
  height: 2rem
  transform: translateY(-50%)
  color: colors.$subtext
  transition: opacity 0.2s

  @container (max-width: 180px)
    opacity: 0
    pointer-events: none

.info-container
  position: absolute
  top: 50%
  right: 0.75rem
  transform: translateY(-50%)
  user-select: none
  cursor: pointer
  color: colors.$subtext
  transition: opacity 0.2s

  @container (max-width: 180px)
    opacity: 0
    pointer-events: none

  p
    margin: 0
    padding: 0.2rem 0.5rem
    border-radius: 0.5rem
    font-size: 10pt
    border: 1px solid colors.$gray

.search-input
  user-select: none
  padding: 0.8rem 6rem 0.8rem 3.5rem
  border: 1px solid colors.$gray
  background-color: colors.$dark-gray
  color: colors.$light-gray
  box-sizing: border-box
  border-radius: 0.7rem
  font-size: 14pt
  width: 100%
  outline: none

  @container (max-width: 180px)
    padding-right: 1rem

  @container (max-width: 180px)
    padding-left: 1rem

  &:focus
    border: 1px solid colors.$primary
    background-color: colors.$gray